<template>
  <div id="pubDynamic">
    <input
      type="text"
      name=""
      id="dynamicTitle"
      placeholder="添加标题"
      class="center"
      @input="input('title', $event)"
    />
    <div class="inputWrap center">
      <img src="../assets/img/updatePic.png" alt="" class="icon" />
      <span>(选择图片)</span>
      <input
        type="file"
        name=""
        id="dynamicImg"
        multiple="multiple"
        @change="change"
      />
    </div>
    <div class="imgWrap center">
      <img :src="url" alt="" v-show="url != ''" class="displayPic" />
    </div>

    <textarea
      name="dynamicContent"
      id="dynamicContent"
      class="center"
      placeholder="留下你的故事吧~~"
      @input="input('content', $event)"
    >
    </textarea>
    <div class="btn center"><button @click="publish">发表</button></div>
    <p class="tip" v-if="this.isSucess">发表动态成功</p>
  </div>
</template>

<script>
import { Request } from "../until/request";
import "../assets/style/default.css";
export default {
  name: "PubDynamic",

  data() {
    return {
      uploadData: {
        userId: 0,
        title: "",
        content: "",
        hasPicture: 0
      },
      files: [],
      url: "",
      isSucess: false
    };
  },
  mounted() {
    this.uploadData.userId = sessionStorage.getItem("userId");
  },
  methods: {
    input(type, e) {
      switch (type) {
        case "title":
          this.uploadData.title = e.target.value;
          break;

        case "content":
          this.uploadData.content = e.target.value;
          break;
      }
    },
    request() {
      let req = new Request();
      let formdata = new FormData();
      this.uploadData.userId = parseInt(this.uploadData.userId);
      this.uploadData.hasPicture = parseInt(this.uploadData.hasPicture);
      // console.log(typeof(this.uploadData.userId))
      for (const key in this.uploadData) {
        if (key == "files") {
          for (const val of this.uploadData["files"]) {
            formdata.append("files", val);
          }
        }
        formdata.append(key, this.uploadData[key]);
      }
      console.log(this.uploadData.files);

      console.log(formdata.get("files"));
      req
        .send("post", "/api/api/dynamicState/insert", formdata)
        .then(res => {
          if (res.data.code == 200) {
            console.log(res);
            this.isSucess = true;
            setTimeout(() => {
              this.isSucess = false;
            }, 1000);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    publish() {
      this.request();
      //   window.location.href = "/#/myDouban/myDynamic";
    },
    change(e) {
      //   console.log(e.target.files);
      this.url = window.URL.createObjectURL(e.target.files[0]);
      if (this.url != "") {
        this.uploadData.hasPicture = 1;
        for (let index = 0; index < e.target.files.length; index++) {
          console.log(e.target.files[index]);
          // this.uploadData.files.push(e.target.files[index])
        }
        this.files = e.target.files;
        this.uploadData.files = this.files;
        console.log(this.uploadData.files);
      }
    }
  }
};
</script>

<style scoped>
.center {
  width: 50rem;
  margin: 0 auto;
}
#pubDynamic {
  width: 100%;
  /* height: 30rem; */
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  /* background: lightblue; */
}
#dynamicTitle {
  width: 49rem;
  height: 3rem;
  margin: 0.8rem auto 0.5rem;
  padding: 0 0.4rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  font-weight: bold;
  /* background: blue; */
}
.inputWrap {
  /* width: 6rem; */
  height: 2rem;
  margin-bottom: 0.6rem;
  /* background: olive; */
  position: relative;
}
.inputWrap span {
  color: #999999;
  font-style: italic;
  font-size: 0.8rem;
  margin-left: 2.1rem;
}
.inputWrap .icon {
  width: 2rem;
  height: 2rem;
  position: absolute;
}
.displayPic {
  margin: 1rem 0 1.2rem;
  width: 15rem;
  /* max-height: 10rem; */
}
.imgWrap {
  display: flex;
  justify-content: center;
}
#dynamicImg {
  width: 6rem;
  height: 2rem;
  position: absolute;
  left: 0;
  z-index: 1;
  opacity: 0;
}
#dynamicContent {
  width: 49rem;
  height: 20rem;
  padding: 0.4rem;
  border: 0.1rem solid #ccc;
  outline: none;
  border-radius: 0.3rem;
}
.btn button {
  width: 5rem;
  height: 2rem;
  margin-top: 1rem;
  color: white;
  border-radius: 0.2rem;
  background: #1a8cff;
  cursor: pointer;
}
.btn button:hover {
  background: #0073e6;
}
.tip {
  margin: 0 auto;
  color: #0073e6;
  font-size: 1.5rem;
}
</style>